var imgsObj = document.querySelectorAll('.ul1>li');
console.log(imgsObj);
    var olLi = document.querySelectorAll('ol Li');
    var prev = document.getElementById('goPrev');
    var next = document.getElementById('goNext');
    let div1 = document.getElementById('div1')
    // 2 变量的设置
    // 上一张图片
    var prevIndex = 0;
    // 当前操作的图片索引
    var index = 0;

    Array.from(olLi).forEach((ele, key) => {
      ele.onclick = () => {
        // console.log(key);
        // 将上一张图片的索引给prevIndex
        prevIndex = index;
        // 记录当前操作的图片索引
        index = key;
        change();
      }
    });

    // 左边按钮
    prev.onclick = () => {
      prevIndex = index;
      index--;
      // 判断是是否超过第一张
      if (index < 0) index = imgsObj.length - 1;
      change();

    }

    // 右边按钮
    next.onclick = () => {
      prevIndex = index;
      index++;
      // 判断是是否超过第一张
      if (index > (imgsObj.length - 1)) index = 0;

      change();
    }

    // 自动播放的实现
    var times = '';
    function autoPlay() {
      clearInterval(times);
      times = setInterval(() => {
        next.onclick();
      }, 3000)
    }
    autoPlay();
    // 鼠标移入则停止
    div1.onmouseenter = function () {
      clearInterval(times);
    }
    // 移出则开始
    div1.onmouseleave = function () {
      autoPlay();
    }
    // 实现图片按钮的切换,取消上一张的ac,给当前操作的添加
    function change() {
      // 去除上一张的
      imgsObj[prevIndex].classList.remove('ac');
      olLi[prevIndex].classList.remove('ac');

      // 给当前的添加
      imgsObj[index].classList.add('ac');
      olLi[index].classList.add('ac');
    }